<template>
  <component v-bind:is="currentItemComponent" :index="(datas.url == '#'? datas.url + datas.id : datas.url || getTime)"
             :key="datas.id">
    <i v-if="isLeaf && datas.icon" :class="datas.icon" class="iconfont"></i>
    <span v-if="isLeaf" slot="title">{{datas.name}}</span>
    <template slot="title" v-if="!isLeaf">
      <i v-if="datas.icon" :class="datas.icon" class="iconfont"></i>
      <span slot="title">{{datas.name}}</span>
    </template>
    <my-el-submenu
      v-if="!isLeaf"
      v-for="item in datas.childs"
      :datas="item"
      :key="item.id"
    ></my-el-submenu>
  </component>
</template>

<script type="text/ecmascript-6">

  export default {
    name: 'MyElSubmenu',
    components: {},
    props: {
      datas: {
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        hc: true
      };
    },
    methods: {},
    computed: {
      currentItemComponent() {
        return this.isLeaf ? 'el-menu-item' : 'el-submenu';
      },
      getTime() {
        return new Date().getTime() + '';
      },
      isLeaf() {
        let childs = this.datas.childs;
        let isLeaf = childs ? childs.length === 0 : true;
        return isLeaf;
      }
    },
    mounted() {
    },
    destroyed() {
    }
  };
</script>
<style scoped lang="less">
  .myElSubmenu {
  }
</style>
